<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div {
            background: #f0f0f0;
            border: 1px solid #e0e0e0;
            margin: 10px;
        }

        .div1 {
            font-size: 16px;
            line-height: 0;
        }

        .div2 {
            font-size: 0;
            line-height: 100px;
        }

        .div3 {
            font-size: 16px;
            line-height: 100px;
        }

        .valign {
            width: 100px;
            display: inline-block;
        }

        .valign>img {
            width: 100%;
        }

        .wrap {
            margin-top: 10px;
            background: #249ff1;
        }

        .wrap>span {
            display: inline-block;
            /* width: 100px;
            height: 100px; */
            border: 1px solid #f00;
        }

        .wrap>img {
            width: 100px;
        }

        .wrap>.middle {
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <h1>Baseline</h1>
    <div class="div div1">我是一行文字大小为100px,但是line-height为0的文字</div>
    <div class="div div2">我是一行文字大小为0,但是line-height为100px的文字</div>
    <div class="div div3">我是一行文字大小和line-height都为100px的文字</div>
    <hr>
    <h1>Vertical-align</h1>
    <div class="valign">
        <img src="../img/avator.jpg" alt="" srcset="">
        <span>baseline(默认值)</span>
    </div>
    <div class="valign">
        <img src="../img/avator.jpg" alt="" srcset="">
        <span style="vertical-align: top;">top</span>
    </div>
    <div class="valign">
        <img src="../img/avator.jpg" alt="" srcset="">
        <span style="vertical-align: middle;">middle</span>
    </div>
    <div class="valign">
        <img src="../img/avator.jpg" alt="" srcset="">
        <span style="vertical-align: bottom;">bottom</span>
    </div>
    <div class="valign">
        <img src="../img/avator.jpg" alt="" srcset="">
        <span style="vertical-align: text-top;">text-top</span>
    </div>
    <div class="valign">
        <img src="../img/avator.jpg" alt="" srcset="">
        <span style="vertical-align: text-bottom;">text-bottom</span>
    </div>
    <div class="valign">
        <img src="../img/avator.jpg" alt="" srcset="">
        <span style="vertical-align: 10px;">10px</span>
    </div>
    <div class="valign">
        <img src="../img/avator.jpg" alt="" srcset="">
        <span style="vertical-align: -10px;">-10px</span>
    </div>
    <div class="valign">
        <img src="../img/avator.jpg" alt="" srcset="">
        <span style="vertical-align: super;">super</span>
    </div>
    <div class="valign">
        <img src="../img/avator.jpg" alt="" srcset="">
        <span style="vertical-align: sub;">sub</span>
    </div>
    <hr>
    <div class="wrap">
        <img src="../img/bar.jpg" />
        <span style="vertical-align: bottom;">test</span>
    </div>
    <div class="wrap">
        <span></span>
        <span>我有内容</span>
    </div>
    <div class="wrap" style="height:200px;">
        <img src="../img/bar.jpg" class="middle" />
    </div>
</body>

</html>